<template>
	<view class="home">
	<!-- 	顶部导航搜索栏 -->
		<uni-nav-bar backgroundColor="red" fixed statusBar color="white" rightText="搜索" @clickRight="search"	>
			 <u-input v-model="searchValue" type="text"   slot="default"  :border="true" style="border-radius:60rpx ;background-color: white;"/>
		</uni-nav-bar>
		<!-- 主要内容展示区域 -->
		 <scroll-view  scroll-y="true" class="scroll-Y" >
			   <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			                         <swiper-item v-for="(item,index) in bannerData" :key="index" >
										<image :src="item.pic" mode="" style="width: 100%;"></image>
			                         </swiper-item>
			                      
			         </swiper>
			
			<view class="recommend">
				
				<view class="recommendItem" v-for="(item,index) in recommendMusic" :key="index" @click="playMusic(item)">
					<image :src="item.al.picUrl" mode="" class="musicImg"></image>
					<view class="musicName">
						{{item.al.name}}
					</view>
				</view>
			</view>
			 
		</scroll-view>
			
	
	
	
	<!-- 底部播放音乐区域 -->
		<myAudeo></myAudeo>
	</view>
</template>

<script>
	
	export default{
		onLoad(){
			console.log(1)
			this.getBanner()
			this.getRecommend()
		},
		data(){
			return{
				searchValue:'', //搜索数据
				bannerData:null, //轮播图数据
				recommendMusic:null,//每日推荐音乐数据
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods:{
			
			//搜索歌曲
			search(){
				console.log('搜索'+this.searchValue)
			},
			//获取轮播图数据
			getBanner(){
				this.$request({
					url:'/banner',
					data:{
						type:1
					}
				}).then(res=>{
				
					this.bannerData=res.data.banners
				
				})
			},
			//获取每日推荐歌曲
			getRecommend(){
				this.$request({
					url:'/recommend/songs',	
				}).then(res=>{
					
					this.recommendMusic=res.data.data.dailySongs
				console.log(this.recommendMusic)
				})
			},
			//播放音乐
			playMusic(music){
				var musicItem={} //提取音乐信息
				console.log(music) // 拿到当前点击的每日推荐的音乐详情
				musicItem.id=music.al.id
				musicItem.name=music.al.name
				musicItem.picUrl=music.al.picUrl
				
				this.$request({
					url:'/song/url',
					data:{
						id:music.al.id
					}
				}).then(res =>{
					console.log(res)
					musicItem.url=res.data.data[0].url
					this.$store.commit('setCurrentMusic',musicItem)
					this.$music.info=musicItem
					if(!this.$music.musicList.find((item)=>{
						return musicItem.id==item.id
					})){this.$music.musicList.push(musicItem)
					}
					
					this.$music.play()
					
				})
				
			}
			
		}
	}
</script>

<style  lang="scss" scoped>
	.home{
		background-color:#F5F5F5 ;
	}
	.scroll-Y{
		width: 100%;
			height: calc(100vh - 294rpx);
		
	}
	
.recommend{
		width: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		.recommendItem{
			width: 260rpx;
			height: 290rpx;	
			margin: 30rpx 0rpx;
			background-color: white;
			border-radius: 30rpx;
			image{
				width: 100%;
				height: 200rpx;
				border-radius: 20rpx;
			
			}
			.musicName{
				width: 100%;
				height:80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 24rpx;
				  display: -webkit-box;/*弹性伸缩盒子模型显示*/
				    -webkit-box-orient: vertical;   /*排列方式*/ 
				    -webkit-line-clamp: 2;/*显示文本行数*/
				    overflow: hidden;/*溢出隐藏*/
					text-overflow:ellipsip;
			}
		}
	}
</style>

